<template>
  <view class="invite-record-container">
    <view 
      class="record-item" 
      v-for="record in records" 
      :key="record.id"
    >
      <view class="record-left">
        <image 
          class="user-avatar" 
          :src="record.avatar || '/static/images/default-avatar.png'" 
          mode="aspectFill"
        ></image>
        <view class="user-info">
          <text class="nickname">{{ record.nickname }}</text>
          <text class="time">{{ record.time }}</text>
        </view>
      </view>
      <view class="record-right">
        <text class="status" :class="{'success': record.status === 1}">
          {{ record.status === 1 ? '邀请成功' : '邀请中' }}
        </text>
        <text class="reward" v-if="record.status === 1">+{{ record.reward }}积分</text>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  records: {
    type: Array,
    default: () => []
  }
})
</script>

<style lang="scss" scoped>
.invite-record-container {
  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .record-left {
      display: flex;
      align-items: center;
      
      .user-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      
      .user-info {
        display: flex;
        flex-direction: column;
        
        .nickname {
          font-size: $font-size-28rpx;
          color: $text-color;
          margin-bottom: 8rpx;
        }
        
        .time {
          font-size: $font-size-24rpx;
          color: $text-color-666;
        }
      }
    }
    
    .record-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      
      .status {
        font-size: $font-size-26rpx;
        color: $text-color-666;
        
        &.success {
          color: $primary-color;
        }
      }
      
      .reward {
        font-size: $font-size-24rpx;
        color: $primary-color;
        margin-top: 8rpx;
      }
    }
  }
}
</style>